<template>
    <div class="user-list">
        <h3>用户列表</h3>
        <!-- :data="filterTableData" -->
        <el-table :data="tableData" style="width: 100%">
            <!-- <el-table-column label="日期" prop="date" /> -->
            <el-table-column label="昵称" prop="nickName" />
            <el-table-column label="账号" prop="account" />
            <el-table-column label="性别" prop="sex" />
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="地址" prop="address" />
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="搜索" />
                </template>
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="page">
            <!-- :page-count="page" -->
            <el-pagination
            :page-size="pageSize"
           
            :pager-count="pageSize"
            layout="prev, pager, next"
            :total="totalNum"
            @change="changePageFn"
        />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { userList } from '../../api/request'

// 定义接口，形容对象的结构
interface User {
    date: string
    nickName: string
    address: string
    sex: string
    age: number
    imgUrl: string
    account: string
    id?:number|string
}

const search = ref('')

const handleDelete = (index: number, row: User) => {
    console.log(index, row)
}

// 用户列表数据
const tableData = ref<any>([])

// 用户总数
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(11)

// 定义函数获取用户列表
const userListFn = async (page=1,pageSize=10)=> {
    await userList({page,pageSize}).then(
        content=>{
            // console.log(content)
            let {code ,total , result} = content;
            if(code == 200) {
                tableData.value = result;
                totalNum.value = total;
            }
        }
    )
}

// 点击分页时执行的函数
const changePageFn = (num:number) => {
    // console.log(value)
    page.value = num;
    userListFn(page.value, pageSize.value);
}

// 初始化用户列表
userListFn(page.value, pageSize.value);

</script>

<style lang="scss">
.user-list {
    h3 {
        margin-bottom: 15px;
    }
    
}
.page {
    margin-top: 15px;
    background-color: #fff;
    padding: 10px 10px;
}
</style>